<template>
  <div>
    <!-- 商品卖点 -->
    <el-form :model="form" label-width="120px">
      <el-form-item label="商品卖点">
        <el-input
          v-model="form.sellPoint"
          maxlength="15"
          show-word-limit
          placeholder="15字内突出商品卖点"
        />
      </el-form-item>

      <!-- 卖点展示周期 -->
      <el-form-item label="卖点展示周期">
        <el-radio-group v-model="form.displayPeriod">
          <el-radio label="全时段展示">全时段展示</el-radio>
          <el-radio label="指定时段展示">指定时段展示</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 文字详情 -->
      <el-form-item label="文字详情">
        <el-input
          v-model="form.details"
          type="textarea"
          maxlength="200"
          show-word-limit
          placeholder="请填写商品的详细介绍，200字内"
        />
      </el-form-item>

      <!-- 图片上传 -->
      <el-form-item label="图片详情">
        <el-upload
          class="upload-demo"
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <div
          style="font-size: 12px; color: #909399; margin-top: 10px;"
        >
          建议图片宽度≥640像素，高度≤50000像素，单张图片20M以内，最多可上传40张。
        </div>
      </el-form-item>
    </el-form>

    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
   prop: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      form: {
        sellPoint: "", // 商品卖点
        displayPeriod: "全时段展示", // 卖点展示周期
        details: "", // 文字详情
      },
      dialogImageUrl: "", // 图片预览
      dialogVisible: false, // 预览对话框是否可见
    };
  },
  methods: {
    // 图片上传后的预览处理
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片移除处理
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
  },
};
</script>

<style>
.upload-demo {
  display: flex;
  flex-wrap: wrap;
}
</style>
